<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="fragment/front/meta"></div>
        <title th:utext="${article.articleTitle}"></title>
        <div th:replace="fragment/front/css"></div>
        <link rel="stylesheet" type="text/css" th:href="@{/statics/page/css/front/article/detail.css}">
	</head>
	<body>
		<div th:replace="fragment/front/nav"></div>
		
		<div class="container-wrap">
		    <div class="container">
            	<div class="area">
            		<article th:id="${article.id}">
						<header class="single-header">
        					<div class="single-meta">
           						<div class="author-avatar">
           							<a target="_blank" href="#" title=" Javin 的主页" rel="author">
          									<img th:src="@{/statics/page/image/front/article/article.author.png}" class="avatar" alt="Javin" width="70" height="70"/>
          								</a>
          							</div>
           						<h1 class="title" th:text="${article.articleTitle}"></h1>
          							<p class="info">
                           			<span class="cat-links">
                           				分类栏目：<a href="">用户体验</a> - 
                           						  <a href="" rel="category tag">用户研究</a>
                           			</span>
                         			</p>
                         			<p class="copyright">
                         				<span>版权信息：</span>
                         				<a class="url" href="" rel="author" th:text="${article.createUserName}"></a>
                         				 原创作品、版权所有，禁止匿名转载，分享请注明版权。
                         			</p>
        					</div>
							<div class="data-meta">
            					<p class="badge-num">82</p>
            					<p>
            						<span class="author"><a target="_blank" href="" th:title="'查看 ' + ${article.createUserName} + ' 发表的全部文章'" th:text="${article.createUserName}"></a> 发布于 <time class="data-time"><recdate:format th:time="${#dates.format(article.verifyTime,'yyyy-MM-dd HH:mm:ss')}" /></time></span>
            						<span class="comments-link"><a href="">暂无评论</a></span>
			            		</p>
							</div>
						</header>
						<div class="single-content-wrapper">
							<div class="single-content" th:utext="${article.articleContent}"></div>
						</div>
    					<footer class="single-footer">
      						<div class="single-heart">
      							<a class="user-signin"><i class="fa fa-heart"></i><span class="heart-text">喜欢</span> ( <span class="heart-no">1</span> )</a>
      							<div class="loading-line"></div>
      						</div>
      						<div class="tag-share">
								<div class="tag-links">
									<span><i class="fa fa-tags"></i>标签</span>
									<a href="" rel="tag">SEO</a>
									<a href="" rel="tag">人工智能</a>
									<a href="" rel="tag">算法</a>
								</div>
      						</div>
      						<nav class="navigation post-navigation" role="navigation">
								<div class="nav-links">
									<a class="pre-post" title="【技术文】创造101的小姐姐，了解一下？" rel="prev" href=""><i class="fa fa-arrow-circle-left"></i>上一篇：【技术文】创造101的小姐姐，了解一下？</a>
                                   	<a class="next-post">无</a>
               					</div>
							</nav>
	    				</footer>
					</article>
           		</div>
            	<div class="area" th:if="${session.code_news_user == null}">
					<div id="comments" class="comments">
        				<div id="respond" class="comment-respond">
							<p class="must-log-in">登录之后才能评论，请点击 <a class="user-signin" th:href="@{/loginPage.html}">登录</a>。</p>	
						</div><!-- #respond -->
	    			</div>
            	</div>
            	
            	<div class="area">
            	    <div id="comments" class="comments">
            	        <div id="respond" class="comment-respond">
                            <form method="post" id="commentform" class="comment-form">
                                <input type="hidden" name="articleId" th:value="${article.id}">
                                <input type="hidden" name="commentId" id="commentId">
                                <div class="comment-from-main">
						            <div id="avatar"><img src="https://secure.gravatar.com/avatar/e9f64f187b15a862547c798f0e3f0006?d=identicon&amp;r=G&amp;s=44" class="avatar" alt="liberty" width="44" height="44"/></div>
						            <div class="comment-form-box">
						            	<span id="reply-user" title="点击以取消回复" style="color:#00c3b6; cursor: pointer"></span>
						            	<textarea aria-required="true" rows="8" cols="100%" name="comment" id="comment" placeholder="说点什么吧..."></textarea>
						            </div>
						        </div>
                                <div id="smilies">
						            <div class="smilies-icon"><i class="fa fa-smile-o"></i></div>
						            <div class="smilies-box">
						                <a href="javascript:grin(':arrow:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_arrow.gif}" title="擦汗" alt="擦汗"></a>
						                <a href="javascript:grin(':grin:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_biggrin.gif}" title="坏笑" alt="坏笑"></a>
						                <a href="javascript:grin(':!:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_exclaim.gif}" title="吓" alt="吓"></a>
						                <a href="javascript:grin(':?:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_question.gif}" title="疑问" alt="疑问"></a>
						                <a href="javascript:grin(':cool:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_cool.gif}" title="大兵" alt="大兵"></a>
						                <a href="javascript:grin(':roll:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_rolleyes.gif}" title="白眼" alt="白眼"></a>
						                <a href="javascript:grin(':eek:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_eek.gif}" title="发呆" alt="发呆"></a>
						                <a href="javascript:grin(':evil:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_evil.gif}" title="抠鼻" alt="抠鼻"></a>
						                <a href="javascript:grin(':razz:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_razz.gif}" title="调皮" alt="调皮"></a>
						                <a href="javascript:grin(':mrgreen:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_mrgreen.gif}" title="呲牙" alt="呲牙"></a>
						                <a href="javascript:grin(':smile:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_smile.gif}" title="微笑" alt="微笑"></a>
						                <a href="javascript:grin(':oops:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_redface.gif}" title="害羞" alt="害羞"></a>
						                <a href="javascript:grin(':lol:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_lol.gif}" title="偷笑" alt="偷笑"></a>
						                <a href="javascript:grin(':mad:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_mad.gif}" title="咒骂" alt="咒骂"></a>
						                <a href="javascript:grin(':twisted:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_twisted.gif}" title="发怒" alt="发怒"></a>
						                <a href="javascript:grin(':wink:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_wink.gif}" title="鼓掌" alt="鼓掌"></a>
						                <a href="javascript:grin(':idea:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_idea.gif}" title="得意" alt="得意"></a>
						                <a href="javascript:grin(':cry:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_cry.gif}" title="大哭" alt="大哭"></a>
						                <a href="javascript:grin(':shock:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_surprised.gif}" title="惊讶" alt="惊讶"></a>
						                <a href="javascript:grin(':neutral:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_neutral.gif}" title="亲亲" alt="亲亲"></a>
						                <a href="javascript:grin(':sad:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_sad.gif}" title="难过" alt="难过"></a>
						                <a href="javascript:grin(':???:')"><img class="lazy" th:src="@{/statics/page/image/front/article/detail/icon_confused.gif}" title="撇嘴" alt="撇嘴"></a>
						            </div>
						        </div>
                                <p class="logged-in-as">
                                    Hello <a href="https://www.jiawin.com/wp-admin/profile.php">liberty</a>！ 
                                    <a href="" title="退出当前帐号">退出</a>
                                </p>
                                <p class="form-submit">
                                    <input type="submit" id="submit" th:onclick="'cnCommonArticleDetail.reply()'" class="submit" value="我要评论"> 
                                </p>
                            </form>
                        </div><!-- #respond -->
                        <h2 class="comments-title">全部评论 / <strong th:text="${comments?.size()}"></strong>        </h2>    
                        <ol class="comment-list">
                            <li th:each="comment:${comments}" class="comment byuser comment-author-jsd even thread-even depth-1 parent" th:id="${'comment-' + comment.id}">
                                <div class="comment-body">
                                    <div class="comment-author vcard">
                                        <a target="_blank" th:title="*{'前往 ' + comment.createUserName + ' 的主页'}" th:href="@{/front/user/detail/{userId}.html(userId=${comment.createUserId})}">
                                            <img th:src="*{comment.userSmallIcon}" class="avatar" th:alt="*{comment.createUserName}" width="44" height="44">
                                        </a>
                                    </div>
                                    <div class="comment-main">
                                        <p th:utext="*{comment.commentContent}"></p>
                                        <div class="comment-meta">
                                            <span class="author"><cite th:text="*{comment.createUserName}"></cite></span>
                                            <span class="date"><recdate:format th:time="*{comment.createTime}" /></span>
                                            <span class="reply">
                                                <a rel="nofollow" class="comment-reply-link" href="javascript:;" th:onclick="'cnCommonArticleDetail.readyReply(\'' + *{comment.id} + '\',\'' + *{comment.createUserName} + '\')'" >回复</a>
                                            </span>
                                        </div>
                                    </div>
                                    <a class="comment-floor" th:onclick="'cnCommonArticleDetail.showReply(this, \'' + *{comment.id} + '\')'">查看全部回复（<th:block th:text="*{comment.commentNum}"></th:block>）</a>
								    <!-- .children -->
								</div>
					        </li><!-- #comment-## -->
					    </ol>
					</div>
			     </div>
		    </div>
		</div>
		
		<div th:replace="fragment/front/footer"></div>
        <div th:replace="fragment/front/script"></div>
        <script type="text/javascript" th:src="@{/statics/page/js/front/article/detail.js}"></script>
    </body>
</html>